import styled from "styled-components";

const boxShadow = `
transition: box-shadow 0.2s ease;
&:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}
`

export const RightWrapper = styled.div`
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 400;
  color: ${props => props.theme.textColor.primary};
  .links {
    display: flex;
    align-items: center;
    .links-item {
      line-height: 18px;
      padding: 12px 15px;
      cursor: pointer;
      border-radius: 22px;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
  .profile {
    display: flex;
    align-items: center;
    width: 77px;
    height: 42px;
    margin-right: 24px;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 25px;
    background: #fff;
    cursor: pointer;
    position: relative;
    /* transition: box-shadow 0.2s ease;
    &:hover {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    } */
    /* styled-components也支持混入的功能：只需要将复用的代码抽离到字符串中，然后使用下面的代码就可以插入上面的代码了。 */
    /* ${boxShadow} */
    /* 但由于该动画许多地方都有使用，所以我们可以抽离到主题配置中 */
    ${props => props.theme.mixin.boxShadow}

    .panel {
      width: 240px;
      background: #fff;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.18);
      position: absolute;
      right: 0;
      top: 60px;
      border-radius: 6px;
      &-top, &-bottom {
        padding: 10px 0;
      }
      &-top {
        border-bottom: 1px solid #ddd;
      }
      &-line {
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        &:hover {
          background: #f5f5f5;
        }
      }
    }
  }
`